import React, {Component} from 'react';
import {Link, withRouter} from "react-router-dom";
import {Menu, Icon} from 'antd';
import {connect} from "react-redux";

import logo from "../../assets/images/logo.png";
import './index.less';
import {menuConfig} from "../../config/menuConfig";
import {setHeadTitle} from "../../redux/actions";

const {SubMenu} = Menu;

class Index extends Component {

  /**
   * 权限验证
   */
  hasAuth = item => {
    const {data} = this.props.user;
    const {username} = data;
    // 这里必须这样设置了，没办法。
    const {menus} = data.role === undefined ? {menus: []} : data.role;
    const flagMenus = 0 === menus.length ? true : menus.indexOf(item.key) >= 0;

    /*
    * 1、如果是admin
    * 2、如果是公开项
    * 3、如果当前项的key在menus中存在
    * 4、如果有children，并且children中的key在menus中，那么当前项就有权限。
    * */
    return ('admin' === username)
      || (item.isPublic)
      || (flagMenus)
      || (item.children && (item.children.find(child => menus.indexOf(child.key) >= 0)));
  };

  /**
   * 累计累加
   *
   * pre是“上一个”的意思，先往pre中添加数据。完成之后再向第二个参数“[]”添加pre的数据。
   * 记得最后一定要
   * return pre
   * @param menuList
   */
  getMenuNodes_reduce = menuList => {
    let {pathname} = this.props.location;
    let path = pathname.indexOf('/product') === 0 ? '/product' : pathname;

    return menuList.reduce((pre, item) => {
      if (!item.children) {
        if (this.hasAuth(item)) {
          // 如果当前的key等于路由地址，或者路由地址中包含有当前key
          if (path === item.key || path.indexOf(item.key) === 0)
          // 更新redux中的headTitle状态.
            this.props.setHeadTitle(item.title);

          pre.push((
            <Menu.Item key={item.key}>
              <Link to={item.key} onClick={() => {
                this.props.setHeadTitle(item.title)
              }}>
                <Icon type={item.icon}/>
                <span>{item.title}</span>
              </Link>
            </Menu.Item>
          ))
        }
      }
      else { // 如果有children，那么递归遍历
        if (this.hasAuth(item)) {
          let cItem = item.children.find(e => e.key === path);
          if (cItem) {
            this.openKey = item.key;
          }

          pre.push((
            <SubMenu
              key={item.key}
              title={
                <span>
								<Icon type={item.icon}/>
								<span>{item.title}</span>
							</span>
              }
            >
              {this.getMenuNodes_reduce(item.children)}
            </SubMenu>
          ))
        }
      }
      return pre;
    }, [])
  };

  /**
   * 在第一次render()之前执行一次
   * 为第一个render()同步准备数据
   */
  UNSAFE_componentWillMount() {
    this.menuNodes = this.getMenuNodes_reduce(menuConfig);
  }

  render() {
    let {pathname} = this.props.location;
    let path = pathname.indexOf('/product') === 0 ? '/product' : pathname; //说明当前请求的是商品管理或者子路由
    // 需要打开菜单项的key
    let openKey = this.openKey;

    return (
      <div className='left-nav'>
        <Link to='/home' className='left-nav-header '>
          <img src={logo} alt="logo"/>
          <h1>永昌装饰后台</h1>
        </Link>
        <Menu
          mode="inline"
          theme="dark"
          selectedKeys={[path]}
          defaultOpenKeys={[openKey]}
        >
          {this.menuNodes}
        </Menu>
      </div>
    );
  }
}

/*
* withRouter 高阶组件：
* 包装非路由组件，返回一个新的组件
* 新的组件向非路由组件传递props的三个属性。
* history/location/match
* */
// export default withRouter(Index);
export default connect(
  state => ({user: state.user}),
  {setHeadTitle} // 这个是在 this.props.setHeadTitle 中读取。
)(withRouter(Index));